<template>
	<view>
		<view class="swiper">
			<swiper :current="swiperIndex" :duration="300" class="swiper-1" easing-function="linear"
				@change="swiperChange">
				<swiper-item>
					<scroll-view :lower-threshold="80" :refresher-triggered="refreStatus"
						@refresherrefresh="handleRefre" :refresher-enabled="true" class="swiper-scroll" scroll-y="true"
						@scrolltolower="swiperScrollLower">
						<view>
							<!-- 收藏为0 -->
							<view class="swiper-item-list" v-for="(item,index) in list" :key="index">
								<view class="noCollecte" v-if="item.length==0">
									<view class="noCollecteImg">
										<!-- <image src="../../static/static/noneCollec.png" mode="widthFix"></image> -->
									</view>
									<view class="noCollecteText">
										<text>暂无收藏~</text>
										<view class="addCollecte" @click="navToMall()">
											前往添加
										</view>
									</view>
								</view>
								<view class="singlePro" @click="navGoToDetail(item.ProductModel)">
									<view class="singleProImg">
										<image :src="item.ProductModel.Img" mode="aspectFill"></image>
									</view>
									<view class="singleText">
										<view class="productMsg">{{item.ProductModel.Name}}</view>
										<view class="productMsg">{{item.ProductModel.Subtitle}}</view>
										<!-- <view class="productMsg" v-if="">{{item.type}}</view> -->
									</view>
								</view>
							</view>
							<!-- 渲染列表 -->
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import { getBusinessCollection,getProductCollection } from '@/api/homePage.js'
	import Config from '@/config/index.js'
	export default {
		data() {
			return {
				swiperIndex: 0, //当前的swiperindex
				list: [],
				refreStatus: false,
				token:'',
				Index:1,
				Size:10
			};
		},
		computed: {
		},
		mounted() {
		},
		onLoad() {
			this.getList(this.Index);
		},
		methods: {
			// 收藏宝贝列表
			async getList(index){
				try{
					uni.showLoading({
						title:'正在加载中...'
					});
					const { Data }= await getProductCollection({
						// token:this.token,
						token:'',
						Index:index,
						Size:this.Size
					});
					console.log(123,Data);
					uni.hideLoading();
					if(Data.length==0){
						uni.showToast({
							title:'没有更多了~',
							icon:'none'
						})
					}else{
						if(index==1){
							this.list=Data;
						}else{
							this.list=[...this.list,...Data];
						}
					}
				}catch(e){
					//TODO handle the exception
				}
			},
			navToMall(){
				uni.switchTab({
					url:'/pages/mall/index'
				})
			},
			// 跳转商品详情页
			navGoToDetail(e) {
				uni.navigateTo({
					url: `/mall_subpages/mall/goods-detail/goods-detail?id=${e.Id}&type=${e.Type}`
				})
			},
			// swiper-ScrollLower触底
			swiperScrollLower() {
				uni.showToast({
					icon: 'none',
					title: `加载中`
				});
			},
			// 下拉事件
			handleRefre() {
				this.refreStatus = true;
				setTimeout(() => {
					this.refreStatus = false;
				}, 1000);
				this.getList(1);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.nav-item {
		display: inline-block;
		margin: 0 16upx;
		text-align: center;
		transition: color 0.3s ease;
	}

	.nav {
		white-space: nowrap;
		position: relative;
		height: 80upx;
		padding: 20upx 0;
	}

	/* #ifndef APP-NVUE */
	::-webkit-scrollbar {
		display: none;
	}

	/* #endif */

	/* #ifdef H5 */
	// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
	scroll-view ::v-deep ::-webkit-scrollbar {
		display: none;
	}

	/* #endif */

	.nav-item-act {
		color: pink;
		font-weight: bolder;
	}

	.nav-line {
		position: absolute;
		bottom: 0;
		height: 10upx;
		border-radius: 10upx;
		background-color: pink;
		transition: left 0.3s ease;
	}

	swiper {
		height: calc(100vh - 0upx);
	}

	swiper-item {
		color: #000;
		position: relative;
	}

	.swiper-item {
		overflow-y: scroll;
	}

	.swiper-item-list {
		padding: 20rpx 40rpx 10rpx;
	}

	.swiper-scroll {
		height: 100%;
	}
	.singlePro{
		width: 100%;
		color: #333;
		display: flex;
		justify-content: space-between;
		.singleProImg{
			width: 200rpx;
			height: 200rpx;
			border: 1rpx solid rgba($color: #000000, $alpha: .06);
			border-radius: 12rpx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.singleText{
			width: 450rpx;
			padding-top: 10rpx;
			.productMsg:nth-child(1){
				margin-bottom: 10rpx;
				font-weight: 600;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;  
				text-overflow: ellipsis;  
				display: -webkit-box;  
				-webkit-line-clamp: 1;    //文本一行显示
				-webkit-box-orient: vertical; 
			}
			.productMsg:nth-child(2){
				color: #666;
				font-size: 30rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;  
				text-overflow: ellipsis;  
				display: -webkit-box;  
				-webkit-line-clamp: 2;    //文本一行显示
				-webkit-box-orient: vertical; 
			}
			.productMsg:nth-child(3){
				width: 100rpx;
				text-align: center;
				color: #666;
				font-size: 24rpx;
				margin-top: 15rpx;
				background-color: #f5f5f5;
			}
		}
	}
</style>
